<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1000px;
            display: flex;
            margin: 50px auto;
            background-color: #eee;
            justify-content: space-between;
        }

        .left {
            width: 400px;
        }

        .left1 {
            width: 400px;
            height: 400px;
            position: relative;
            cursor: move;
        }

        .left1 img {
            width: 400px;
            height: 400px;
        }

        .cover {
            width: 200px;
            height: 200px;
            background-color: rgba(255, 0, 0, 0.5);
            position: absolute;
            top: 0;
            opacity: 0;
            pointer-events: none;
            /* cursor: move; */
        }

        .right {
            width: 400px;
            height: 400px;
            position: relative;

            overflow: hidden;
        }

        .right img {
            width: 800px;
            height: 800px;
            position: absolute;

        }
    </style>
</head>

<body>

    <div class="box">
        <div class="left">
            <div class="left1">
                <img src="https://img14.360buyimg.com/n1/s150x150_jfs/t1/133978/24/29086/53927/646c8f25F3dd02e25/e38968bff9ff6017.jpg"
                    alt="">
                <div class="cover"></div>
            </div>
            <div class="left2">
                <!-- <img src="1" alt="">
                <img src="2" alt="">
                <img src="3" alt="">
                <img src="4" alt=""> -->
            </div>
        </div>
        <div class="right">
            <img src="https://img14.360buyimg.com/n1/s150x150_jfs/t1/133978/24/29086/53927/646c8f25F3dd02e25/e38968bff9ff6017.jpg"
                alt="">
        </div>
    </div>



    <script>

        // 放大镜
        //    鼠标跟随
        //    小盒子与大图是反向移动的
        //    左边小盒子和图片的比例  =  右边盒子和大图的比例


        // 第一步：样式 ---    

        // 第二步：鼠标跟随



        // 注意点：
        //    边小盒子和图片的比例  =  右边盒子和大图的比例
        //    小盒子与大图是反向移动的  --- 移动是有比例的


        var oBox = document.querySelector('.left1');


        // 右边的大盒子
        var oRightImg = document.querySelector('.right img');
        var oRight = document.querySelector('.right');

        var oA = oBox.querySelector('.cover');

        var r = oA.offsetWidth / 2;;
        console.log(r);

        var bd = parseInt(getComputedStyle(oBox).borderWidth);
        console.log(bd);

        var boxLeft = oBox.offsetLeft;
        var boxTop = oBox.offsetTop;

        var maxLeft = oBox.clientWidth - oA.offsetWidth;
        var maxTop = oBox.clientHeight - oA.offsetHeight;


        var maxRight = oRightImg.offsetWidth - oRight.clientWidth;

        // 左边小盒子的移动  和   右边大图的移动的比例
        var scale = maxRight / maxLeft;


        // 给大盒子绑定事件
        oBox.onmousemove = function (e) {
            var x = e.offsetX - r;
            var y = e.offsetY - r;

            if (x < 0) x = 0;
            if (y < 0) y = 0;
            if (x > maxLeft) x = maxLeft;
            if (y > maxTop) y = maxTop;
            oA.style.left = x + 'px';
            oA.style.top = y + 'px';


            // 右图移动
            oRightImg.style.left = -x * scale + 'px';
            oRightImg.style.top = -y * scale + 'px';
        }


        oBox.onmouseout = function () {
            oA.style.opacity = '0';
        }

        oBox.onmouseover = function () {
            oA.style.opacity = '1';
        }

    </script>

</body>

</html>